import React, { useRef, useState, useEffect } from 'react';
import { connect } from 'umi';
import { Tag, Tooltip, Button, notification, Card } from 'antd';
import { } from '@/common/contact'
import TableDataBlock from '@/components/TableDataBlock';
import CodeModel from './components/CodeModel';
import WpsSet from './WpsDrawer'
import moment from 'moment';
import SelectFormTypeModel from './components/SelectFormTypeModel';
import GatherEdit from './components/GatherEdit';
import ShowList from './components/ShowList'
import TabComponents from '@/components/TabComponents';
import { uploadFile } from '@/utils/utils';
import './index.less'
const Gather = (props) => {
    const { loading, dispatch, list, history } = props;
    const childRef = useRef();
    const handleCallback = () => {
        childRef.current.fetchGetData();
    };
    const [formVisible, setFormVisible] = useState(false)
    const [visible, setVisible] = useState(false);
    const [showList, setListVisible] = useState(false)
    const [modelVisible, setModelVisible] = useState(false)
    const [gatherVisible, setGatherVisible] = useState(false)
    const [params, setParams] = useState({
    })
    const [collectionType, setCollectionType] = useState('form')
    const tabObj = {
        form: '表单',
        Jielong: '接龙',
        vote: '投票',
        questionnaire: '问卷'
    }
    const initStageList = () => {
        return Object.keys(tabObj).map(item => {
            return {
                key: tabObj[item],
                value: item
            }
        })
    }
    const copyList = e => {
        const textToCopy = e
        // 创建一个虚拟input元素
        const input = document.createElement('input')
        input.value = textToCopy
        document.body.appendChild(input)
        // 选择输入框的内容
        input.select()
        input.setSelectionRange(0, 99999) // 兼容移动设备
        // 执行复制操作
        document.execCommand('copy')
        // 移除虚拟input元素
        document.body.removeChild(input)
        // 可以显示一条消息或者执行其他操作
        notification.success({
            message: '温馨提示',
            description: `复制成功`,
        })
    }
    const fetchShareInfo = (record, callback) => {
        const { id } = record
        dispatch({
            type: 'liveStreaming/fetchGetShareInfo',
            payload: {
                shareId: id,
                shareType: 'collect',
                organizationId: window.localStorage.getItem(
                    'organizationId',
                )
            },
            callback: (e) => {
                const { shareInfo } = e
                const {
                    wechatUrl
                } = shareInfo
                copyList(wechatUrl)
            }
        })

    }
    const fetchShareCode = (record) => {
        const { id } = record
        dispatch({
            type: 'liveStreaming/fetchGetShareInfo',
            payload: {
                shareId: id,
                shareType: 'collect',
                subType: 'gather',
                organizationId: window.localStorage.getItem(
                    'organizationId',
                )
            },
            callback: async (e) => {
                const { shareInfo } = e
                setModelVisible({
                    show: true,
                    details: shareInfo
                })
            }
        })

    }
    const extraBtn = [
        {
            text: '新建',
            onClick: () => {
                setFormVisible({
                    show: true,
                    detail: {
                        collectionType
                    }
                });
            },
        },
        {
            text: '导出',
            onClick: () => {
                dispatch({
                    type: 'liveStreaming/fakeExportUserInformationCollection',
                    payload: {
                        ...params
                    },
                    callback: (e) => {
                        const { url } = e
                        uploadFile(url)
                    }

                })
            },
        },

    ];
    const searchItems = [
        {
            label: '信息采集名称',
            name: 'keyword',
        },
        {
            label: '状态',
            name: 'status',
            type: 'select',
            list: {
                0: '禁用',
                1: '启用'
            }
        },
        {
            label: '有效时间',
            type: 'rangePicker',
            name: 'startTime',
            end: 'endTime',
            hasDate: false
        },
        {
            label: '是否允许分享',
            name: 'shareFlag',
            type: 'select',
            select: {
                0: '不允许',
                1: '允许'
            }
        },
    ];
    const getColumns = [
        {
            title: '信息采集名称',

            dataIndex: 'title',
        },
        {
            title: '类型',
            dataIndex: 'collectionType',
            render: (e) => {
                return tabObj[e]
            }
        },
        {
            title: '是否允许充分',

            dataIndex: 'repeatFlag',
            render: (e) => {
                return ['否', '是'][e];
            },
        },
        {
            title: '是否允许独立采集',
            dataIndex: 'independentFlag',
            render: (e) => {
                return ['否', '是'][e];
            },
        },
        {
            title: '采集份数',
            dataIndex: 'recordAmount',
            render: (e, record) => {
                return <Button onClick={() => { setListVisible({ show: true, detail: record }) }} type='link'>{e}</Button>
            },
        },
        {
            title: '创建时间',
            dataIndex: 'createTime',
        },
        {
            title: '创建人',
            dataIndex: 'createAdminName',
        },

        {
            title: '是否允许分享',
            dataIndex: 'shareFlag',
            render: (e) => {
                return {
                    0: '不允许',
                    1: '允许'
                }[e]
            }
        },
        {
            title: '有效时间',
            dataIndex: 'startTime',
            render: (e, record) => {
                const { startTime, endTime } = record
                return startTime + '-' + endTime
            }
        },

        {
            type: 'handle',
            width: 200,
            dataIndex: 'id',
            render: (val, record) => [
                {
                    title: '查看详情',
                    click: () => {
                        dispatch({
                            type: 'liveStreaming/fetchInformationCollectionDetail',
                            payload: { id: val },
                            callback: (e) => {
                                const { content, startTime, endTime, collectType } = e;
                                if (record.oldFlag === '1') {
                                    setGatherVisible({
                                        show: true,
                                        detail: {
                                            ...e,
                                            content: content ? JSON.parse(content) : [],
                                            startTime: startTime ? [moment(startTime, 'YYYY-MM-DD'), moment(endTime, 'YYYY-MM-DD')] : null,
                                        },
                                    });

                                } else {
                                    setVisible({
                                        show: true,
                                        detail: {
                                            ...e,
                                            content: content ? JSON.parse(content) : [],
                                            startTime: startTime ? [moment(startTime, 'YYYY-MM-DD'), moment(endTime, 'YYYY-MM-DD')] : null,
                                        },
                                        collectType
                                    });
                                }

                            },
                        });
                    },
                },
                {
                    title: '创建复本',
                    click: () => {
                        dispatch({
                            type: 'liveStreaming/fetchInformationCollectionDetail',
                            payload: { id: val },
                            callback: (e) => {
                                const { content, startTime, endTime, collectType } = e;
                                if (record.oldFlag === '1') {
                                    setGatherVisible({
                                        show: true,
                                        detail: {
                                            ...e,
                                            content: content ? JSON.parse(content) : [],
                                            startTime: startTime ? [moment(startTime, 'YYYY-MM-DD'), moment(endTime, 'YYYY-MM-DD')] : null,
                                            id: ''
                                        },
                                    });

                                } else {
                                    setVisible({
                                        show: true,
                                        detail: {
                                            ...e,
                                            content: content ? JSON.parse(content) : [],
                                            startTime: startTime ? [moment(startTime, 'YYYY-MM-DD'), moment(endTime, 'YYYY-MM-DD')] : null,
                                            id: ''
                                        },
                                        collectType,
                                        type: 'coby'
                                    });
                                }

                            },
                        });
                    },
                },
                {
                    title: '复制链接',
                    visible: record.independentFlag === '1',
                    click: () => {
                        fetchShareInfo(record,)
                    },
                },
                {
                    title: '分享二维码',
                    visible: record.independentFlag === '1',
                    click: () => {
                        fetchShareCode(record)
                    },
                },
                {
                    title: '启用',
                    visible: record.status === '0',
                    click: () => {
                        dispatch({
                            type: 'liveStreaming/fakeEnableInformation',
                            payload: { id: val },
                            callback: () => {
                                handleCallback();
                            },
                        });
                    },
                },
                {
                    title: '禁用',
                    visible: record.status === '1',
                    click: () => {
                        dispatch({
                            type: 'liveStreaming/fakeDisableInformation',
                            payload: { id: val },
                            callback: () => {
                                handleCallback();
                            },
                        });
                    },
                },
                {
                    type: 'del',
                    click: () => {
                        dispatch({
                            type: 'liveStreaming/fakeDeleteInformationCollection',
                            payload: { id: val },
                            callback: () => {
                                handleCallback();
                            },
                        });
                    },
                },
            ],
        },
    ];
    useEffect(() => {
        handleCallback()
    }, [collectionType])
    if (showList) {
        return <ShowList visible={showList} onClose={() => setListVisible(false)}></ShowList>
    }
    return (
        <Card title='信息采集'>
            <TabComponents value={collectionType} onChange={(e) => {
                setCollectionType(e)
            }} tabList={initStageList()}></TabComponents>
            <TableDataBlock

                btnExtra={extraBtn}
                cRef={childRef}
                loading={loading}
                params={{ collectionType }}
                searchCallback={(e) => { setParams(e) }}
                searchItems={searchItems}
                columns={getColumns}
                rowKey={(record) => `${record.id}`}
                dispatchType="liveStreaming/fetchInformationCollection"
                {...list}
            ></TableDataBlock>
            <SelectFormTypeModel onOk={(e) => {
                setVisible({
                    show: true,
                    collectionType: e
                })
            }} visible={formVisible} onClose={() => setFormVisible(false)}></SelectFormTypeModel>

            <GatherEdit handleCallback={handleCallback} visible={gatherVisible} onClose={() => setGatherVisible(false)}></GatherEdit>
            <WpsSet handleCallback={handleCallback} visible={visible} onClose={() => setVisible(false)}></WpsSet>
            <CodeModel visible={modelVisible} onClose={() => setModelVisible(false)}></CodeModel>
        </Card>
    );

};

export default connect(({ liveStreaming, loading }) => ({
    list: liveStreaming.informationCollectionList,
    loading: loading.models.liveStreaming,
}))(Gather);
